<template>
  <el-select
      class="width_100"
      placeholder="请选择"
      filterable
      collapse-tags
      :multiple="multiple"
      v-model="selectValue"
      collapse-tags-tooltip
      :clearable="clearable"
      :filter-method="handleQuerySearch"
      @change="handleQueryChange"
      @visible-change="visibleChange"
  >
    <el-option
      v-for="item in selectOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    <VabElSelectLoading
      :page="page"
      :loading="loading"
      :hasMore="hasMore"
      @loadMore="handleLoadMore"
    />
  </el-select>
</template>

<script setup lang="ts">
/**
* @import
*/
import _ from 'lodash';
import { ref } from 'vue'
import { productCustomerProductSearch } from '~/src/api/dms/product';

/* 客户 有关 */

/**
* @props
*/
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: '',
  },
  apiType: {
    type: Number,
    default: 1,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  clearable: {
    type: Boolean,
    default: true,
  },
})

/**
* @var
*/

const proxy: any = getCurrentInstance()?.proxy
const page = ref(0)
const loading = ref(false)
const isVisibleChange = ref(false)
const hasMore = ref(true)

const selectValue = ref<any>()
const sreachValue = ref<any>('')
const selectOptions = ref<any[]>([])

const emit = defineEmits(['LazyChange'])

/**
* 加载数据列表
*/
const loadDataList = async () => {
  try {
    loading.value = true

    // 参数
    let data = {
      page: page.value,
      type: props.apiType,
      limit: 10,
      filter: {
        customer_number: props.type == 'customer_number' ? sreachValue.value : '', // 物料编码
        customer_name: props.type == 'customer_name' ? sreachValue.value : '', // 物料编码
        product_number: props.type == 'product_number' ? sreachValue.value : '', // 物料编码
        product_name: props.type == 'product_name' ? sreachValue.value : '', // 物料编码
      },
    }

    // api
    const res = await productCustomerProductSearch({ ...data })

    // 遍历获取
    const list = res.data.list.map((item: any) => {
      if (props.type == 'customer_number') return { value: item.customer_number, label: item.customer_number }
      if (props.type == 'customer_name') return { value: item.customer_name, label: item.customer_name }
      if (props.type == 'product_number') return { value: item.product_number, label: item.product_number }
      if (props.type == 'product_name') return { value: item.product_name, label: item.product_name }
    }) || []

    if (page.value == 1) selectOptions.value = []

    // 添加新的数据
    selectOptions.value.push(...list)

    // 是否进行加载数据
    hasMore.value = selectOptions.value.length < res.data.count

    loading.value = false

  } catch (err) {
    console.error(err)
  } finally {
    loading.value = false
  }
}

/**
* 加载更多数据
*/

const handleLoadMore = _.throttle(async (value: any) => {
  if (!isVisibleChange.value) return
  page.value = await value
  loadDataList()
}, 1000)

/**
* 模糊搜索
*/
const handleQuerySearch = _.throttle((value: any) => {
  // 去空格 大小写
  sreachValue.value = value?.trim().toLowerCase().replace(/\s+/g, '\n')
  page.value = 1
  // 加载数据
  loadDataList()
}, 1000)


const visibleChange = (lay: boolean) => {
  isVisibleChange.value = lay
  if (!lay) return
}

/**
* change
*/
const handleQueryChange = (value: any) => {
  emit('LazyChange', value)
}

/**
* @实例
*/

watch(
  () => props.value,
  (newValue, oldValue) => {
    selectValue.value = newValue
  },
  { deep: true, immediate: true }
)

defineExpose({
})
</script>

<style lang="scss" scoped></style>
